<!-- 亲密度的悬浮窗 -->
<template>
  <div @click="handleOpenPup" class="intimate-delta-fix" ref="intimateRef">{{ intimateDelta }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
defineProps({
  // 传入一个分数
  intimateDelta: {
    default: 0,
    type: Number,
  },
})
const intimateRef = ref<HTMLDivElement>()

// 获取元素的top高度, 用于当Ios软键盘弹出的时候获取top的高度
const getRefTop = () => {
  if (!intimateRef.value) return
  const styles = window.getComputedStyle(intimateRef.value)
  return parseInt(styles.top)
}
// 设置元素的高度，用于当Ios软键盘弹出的时候重置top的高度
const setRefTop = (top: string) => {
  if (!intimateRef.value) return
  intimateRef.value.style.top = top
}

// 点击亲密度悬浮窗
const handleOpenPup = () => {
  // do something
}

defineExpose({
  getRefTop,
  setRefTop,
})
</script>

<style lang="scss" scoped>
.intimate-delta-fix {
  position: fixed;
  top: 100px;
  right: 10px;
  height: 50px;
  width: 50px;
  border-radius: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  z-index: 10;
  background-color: rgba(106, 69, 255, 1);
}
</style>
